<template>
  <div class="app-container">
    <eHeader :roles="roles" :query="query"/>
    <!--表格渲染-->
    <table class="visual-draggable-table" cellspacing="0" cellpadding="0" v-loading="loading">
      <thead>
      <tr>
        <th scope="col">
          <div class="cell">排序</div>
        </th>
        <th scope="col">
          <div class="cell">模块名称</div>
        </th>
        <th scope="col">
          <div class="cell">组件详情</div>
        </th>
        <th scope="col">
          <div class="cell">创建时间</div>
        </th>
<!--        <th scope="col">-->
<!--          <div class="cell">更新时间</div>-->
<!--        </th>-->
        <th scope="col">
          <div class="cell">操作</div>
        </th>
      </tr>
      </thead>
      <draggable v-model="data"
                 element="tbody"
                 :options="tableDragOptionsStar"
                 :move="onMove"
                 @start="isDragging=true"
                 @end="tableMoveEnd">
        <tr v-for="(item,index) in data" :key="item.add_at">
          <td scope="row" rowspan="1" colspan="1" style="cursor: all-scroll;">
            <div class="cell" :data-id="item.id" :data-index="index">{{index+1}}</div>
          </td>
          <td rowspan="1" colspan="1">
            <div class="cell">{{item.tab_name}}</div>
          </td>
          <td rowspan="1" colspan="1">
            <div class="cell">{{item.action_names}}</div>
          </td>
          <td rowspan="1" colspan="1">
            <div class="cell">{{item.add_at}}</div>
          </td>
          <td rowspan="1" colspan="1">
            <div class="cell">
              <el-button @click="toActionPage(item)" size="mini" type="primary">设置</el-button>
              <edit
                :data="item"
                :roles="roles"
                :sup_this="sup_this"
              />
              <el-popover
                :ref="item.id"
                placement="top"
                width="180"
              >
                <p>确定删除本条数据吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="$refs[item.id][0].doClose()">取消</el-button>
                  <el-button
                    :loading="delLoading"
                    type="primary"
                    size="mini"
                    @click="subDelete(item.id)"
                  >确定
                  </el-button>
                </div>
                <el-button slot="reference" type="danger" size="mini">删除</el-button>
              </el-popover>
            </div>
          </td>
        </tr>
      </draggable>
    </table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
  import checkPermission from '@/utils/permission'
  import initData from '@/mixins/initData'
  import { parseTime } from '@/utils/index'
  import eHeader from './module/header'
  import edit from './module/edit'
  import draggable from "vuedraggable";

  export default {
    name: 'corpVisualConfig',
    components: { eHeader, edit, draggable },
    mixins: [initData],
    data() {
      return {
        page: 1,
        limit: 20,
        roles: [],
        delLoading: false,
        sup_this: this,
        dialogVisible: false,
        dialogVisible2: false,
        userName: 'admin',
        total2: 0,
        sizes2: 10,
        page2: 0,
        user_name: '',
        userSearchName: '',
        page_size: 10,
        updateId: null,
        tableDragOptionsStar: {
          animation: 300,
          group: "tableDragOptions",
        },
      }
    },
    beforeCreate() {
      window.removeEventListener('beforeunload', e => {
        e = e || window.event
        if (e) {
          e.returnValue = '关闭提示'
        }
        sessionStorage.setItem('reload', '0')
        return '关闭提示'
      })
    },
    created() {
      this.$nextTick(() => {
        this.init()
      })
    },
    methods: {
      checkPermission,
      beforeInit() {
        this.url = '/admin/v1/config-corp'
        const query = this.query
        const value = query.value
        this.params = { page: this.page, limit: this.limit }
        if (value) {
          this.params['name'] = value
        }
        return true
      },
      toActionPage(val) {
        let { id, sort, tab_name, action_config, tab_names } = val;
        let action_arr = [];
        this.data.forEach(item => {
          item.action_config.forEach(action => {
            action_arr.push(action.item)
          })
        })
        this.$router.push({
          path: '/draggable/sys-draggable/visualDrag',
          query: { id, sort, tab_name, action_config, tab_names, action_arr },
        })
      },
      subDelete(id) {
        let _that = this;
        this.$api.permission.visualDraggableConfig
          .delTabsConfig(id)
          .then(result => {
            _that.$refs[id][0].doClose();
            _that.init();
            console.log(result);
          }).catch(error => {
          console.log(error);
        })
      },
      onMove(env) {
        const relatedElement = env.relatedContext.element;
        const draggedElement = env.draggedContext.element;
        return (
          (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
        );
      },
      tableMoveEnd(env) {
        this.data.forEach((item,index)=>{
            item.sort = index+1
        })
        console.log(env.newIndex,env.newDraggableIndex,env.oldIndex,env.oldDraggableIndex);
      },
    },
  }
</script>
<style lang="scss" rel="stylesheet/scss">
  .visual-draggable-table {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    flex: 1;
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    color: #606266;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    border-collapse: collapse;

    td, th {
      padding: 12px 0;
      min-width: 0;
      box-sizing: border-box;
      text-overflow: ellipsis;
      vertical-align: middle;
      position: relative;
      text-align: left;
      background-color: #FFFFFF;
      border: 1px solid #EBEEF5;
    }

    thead {
      color: #909399;

      th {
        .cell {
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          word-break: break-all;
          line-height: 23px;
          padding-right: 10px;
        }
      }
    }

    tbody {
      td {
        .cell {
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          word-break: break-all;
          line-height: 23px;
          padding-right: 10px;
        }
      }
    }

    thead th, tbody td {
      padding-left: 10px;
    }

    tbody td .cell {
      font-size: 12px;
    }
  }
</style>
